<template>
  <div class="container" ref="containerDom">
    <div class="component searchForm" ref="searchForm" :style="{
      marginBottom: searchFormMarginBottom,
      backgroundColor: contentBgColor
    }">
      <slot name="searchForm" />
    </div>
    <div class="component btnList" ref="btnList" :style="{
      marginBottom: btnListMarginBottom,
      backgroundColor: contentBgColor
    }">
      <slot name="btnList" />
    </div>
    <div class="component content" ref="content" :style="{
      height: content_H,
      marginBottom: contentMarginBottom,
      backgroundColor: contentBgColor
    }">
      <slot name="content" />
    </div>
    <div class="component footer" ref="footer">
      <slot name="footer" />
    </div>
    <div class="dialogModule" v-if="$slots.dialogModule">
      <slot name="dialogModule" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Container',
  props: {
    searchFormMarginBottom: {
      type: String,
      default: () => {
        return '7px'
      }
    },
    btnListMarginBottom: {
      type: String,
      default: () => {
        return '7px'
      }
    },
    contentMarginBottom: {
      type: String,
      default: () => {
        return '7px'
      }
    },
    contentBgColor: {
      type: String,
      default: () => {
        return ''
      }
    },
  },
  data() {
    return {
      containerDom_H: 0,
      searchForm_H: 0,
      btnList_H: 0,
      footer_H: 0,
      content_H: 0,
      resizeObserver: null
    }
  },
  computed: {},
  mounted() {
    this.watchDomHeight();
  },
  methods: {
    watchDomHeight() {
      let refsList = ['containerDom', 'searchForm', 'btnList', 'footer'];
      let marginNum = 14
      refsList.forEach(refName => {
        this.$nextTick(() => {
          //监听展示区dom高度；
          this.resizeObserver = new ResizeObserver(entries => {
            for (let entry of entries) {
              const { height } = entry.contentRect;
              this[`${refName}_H`] = height;
              //如果对应的插槽父级高度是0 marginBottom也设置为0；
              if (this.$refs[refName]) {
                if (!height) {
                  this.$refs[refName].style.marginBottom = 0;
                } else {
                  this[`${refName}MarginBottom`] && (this.$refs[refName].style.marginBottom = this[`${refName}MarginBottom`]);
                }
                //如果没有footer 内容去的margin 设置为0；
                !this.footer_H && this.$refs['content'] && (this.$refs['content'].style.marginBottom = 0);
                //计算内容区间高度；
                this.content_H = this.containerDom_H - (this.searchForm_H + this.btnList_H + this.footer_H + marginNum) + 'px'
              }
            }
          });
          this.$refs[refName] && this.resizeObserver.observe(this.$refs[refName]);
        });
      })
    }
  },
  beforeDestroy() {
    let refsList = ['containerDom', 'searchForm', 'btnList', 'footer'];
    refsList.forEach(e => {
      this.$refs[e] && this.resizeObserver.observe(this.$refs[e]);
    })
  },
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;

  .component {
    width: 100%;
    // border-radius: 6px;
    transition: all 0.3s;

    &:last-child {
      margin-bottom: 0 !important;
    }
  }

  .content {
    overflow: auto;
  }
}
</style>
